<template>
	<view class="title">
		<text class="iconfont">&#xe6b1;优惠券</text>
	</view>
	<view class="checkTab">
		<view :class="yh_type=='left'?'left active':'left'" @click="qh_type" data-type="left">
			当前订单可用（{{a}}）
		</view>
		<view :class="yh_type=='right'?'right active':'right'" @click="qh_type" data-type="right">
			当前订单不可用（0）
		</view>
	</view>
	<view v-show="yh_type=='left'?'true':''" v-for="(v,i) in listData" :key='i'>
		<view class="list">
			<view class="left">
				<image  mode=""></image>
			</view>
			<view class="right">
				<view class="r_title">
					<view class="r_left">
						<text>{{v.yh_mingcheng}}</text>
					</view>
					<view class="r_right" @click="use(v)">
						<text>立即使用</text>
					</view>
				</view>
				<view class="r_time">
					<text>有效期</text>
					<br>
					<text>{{v.yh_youxiaoqi}}</text>
				</view>
				<view class="r_zhushi">
					<text>{{v.yh_menkan}}</text>
				</view>
			</view>
		</view>
		</view>
	<view v-show="yh_type=='right'?'true':''">
		<text>2</text>
	</view>
</template>

<script>
	import {reactive,toRefs,onMounted,computed} from 'vue'
	import {useStore} from 'vuex'
	import http from '../../utils/http.js'
	import store from '../../store/index.js'
	export default {
		setup() {
			const {state,commit,getters,dispatch} = useStore()
			onMounted(async()=>{
				let shopcartID = state.shopcart.shangpinId
				let Arr= []
				for (let i = 0; i < shopcartID.length; i++) {
					// console.log(1)
				await	http({
						url:'/couponsShopid',
						method:'get',
						data:{
							data:shopcartID[i],
							yonghu:state.userID
						}
					}).then((res)=>{
						// console.log(res.data.data)
						Arr.push(...res.data.data)
					})
					console.log(state.shopcart.shangpinId)
				}
				for (let j = 0; j < Arr.length; j++) {
					for (let l = j+1; l < Arr.length; l++) {
						if(Arr[j].yh_id==Arr[l].yh_id){
							Arr.splice(l,1)
							l--
						}
					}
				}
				console.log(Arr)
				commit('UC/show',Arr)
			})
			let data = reactive({
				a: 1,
				yh_type: 'left',
				qh_type: (e) => {
					data.yh_type = e.target.dataset.type
				},
				listData:computed(()=>{
					return state.UC.data
				}),
				use(data){
					commit('UC/youhui',data)
					uni.navigateTo({
						url:'../querendingdan/querendingdan'
					})
				}
			});
			return {
				...toRefs(data)
			}
		}
	}
</script>

<style lang="less">
	@import url("~@/static/fonts/iconfont.css");

	.title {
		border-bottom: 1px solid #c8c8c8;
		padding: 20rpx 10rpx;
	}

	.checkTab {
		display: flex;
		justify-content: space-around;
		font-size: 35rpx;

		.left {
			flex: 1;
			text-align: center;
			padding: 15rpx 0;

			text {
				width: 100%;
			}
		}

		.right {
			flex: 1;
			padding: 15rpx 0;
			text-align: center;

			text {
				width: 100%;
			}
		}
	}

	.active {
		border-bottom: 2px solid red;
		color: red;
	}

	.list {
		padding: 30rpx 10rpx;
		border-bottom: 1px solid #c8c8ce;

		.left {
			float: left;
			width: 180rpx;
			height: 200rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.right {
			.r_title {
				display: flex;
				justify-content: space-between;
				font-size: 35rpx;

				.r_left {
					padding-left: 20rpx;
					padding-top: 15rpx;
				}

				.r_right {
					background-color: red;
					color: white;
					padding: 15rpx;
					border-radius: 25rpx;
					padding-right: 20rpx;
				}
			}

			.r_time {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #969896;

				text {
					padding-left: 20rpx;
				}
			}

			.r_zhushi {
				margin-top: 30rpx;
				font-size: 28rpx;
				color: #969896;

				text {
					padding-left: 20rpx;
				}
			}
		}
	}

	.list:last-child {
		border-bottom: none;
	}
</style>
